<template>
	<div class="wdxq2" :style="{'min-height':Height-73+'px'}">
		<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">手机认证</span>
			<i class="el-icon-arrow-left" style="float: right;margin-right: 4%;font-size: 2.4rem;opacity: 0;"></i>
		</div>
		<img style="width: 100%;display: block;" src="../../../../static/img/images/sjrz.jpg" />
		<div class="wdxq_div" style="border: 0;">
			<input v-model="phone" type="number" placeholder="请输入手机号" class="wdxq_div9input" />
		</div>
		<div class="wdxq_div flex">
			<input v-model="code" type="number" placeholder="请输入验证码" class="wdxq_div9input flex1" />
			<el-button round :class='yzm?"yzmshow":"yzmhide"' @click='yzmhq'>{{yzmtext}}</el-button>
		</div>
		<div class="wdxq_div" style="border: 0;padding-bottom: 1rem;">
			<el-button round style='color: #fff;background: #ff4242;width: 100%;font-size: 1.5rem;' @click='phoneAuthent'>提交</el-button>
		</div>

	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				phone:'',
				code:'',
				yzmtext:'获取验证码',
				yzm:true,
				Height:0,
				tabI:0,
				yzmtime:60,
				div3list:[{
					'name':'微信认证 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx2.jpg',
					
				},{
					'name':'手机认证',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx3.jpg'
				},{
					'name':'实名认证 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx4.jpg'
				}]

			}
		},
		mounted() {
			this.Height=document.body.offsetHeight;
		},
		methods: {
			yzmdjs(){
				if(this.yzmtime!=0){
					this.yzmtime--;
					this.yzmtext=this.yzmtime+'s';
					setTimeout(()=>{
						this.yzmdjs();
					},1000)
				}
				else{
					this.yzmtime=60;
					this.yzmtext='获取验证码';
					this.yzm=true;
				}
			},
			yzmhq(){
				if(this.phone.trim()==''){
					Toast('请输入手机号');
					return false;
					
				}
				if(this.yzm){
					this.yzm=false;
					
					this.$http.post(this.defines.send_msg, {
						uid: window.uid,
						phone:this.phone
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								this.yzmdjs();
								Toast('发送成功');
							}
							else{
								this.yzm=true;
								Toast('发送不成功，请稍后再试');
							}
							
						},
						(error) => {
							console.log(error);
						}
					);

				}
				
			},
			fh(){
        		window.history.go(-1);
        	},
        	phoneAuthent(){
        		if(this.phone.trim()==''){
					Toast('请输入手机号');
					return false;
					
				}
        		if(this.code.trim()==''){
					Toast('请输入验证码');
					return false;
					
				}
				this.$http.post(this.defines.phoneAuthent, {
					uid: window.uid,
					phone:this.phone,
					code:this.code,
				}, {
					emulateJSON: true
				})
				.then(
					(data) => {
						if(data.data.success){
							Toast('验证成功');
							this.fh();
						}
						
					},
					(error) => {
						console.log(error);
					}
				);
        		
        	}
		}
	}
</script>
<style scoped="scoped">
	.yzmshow{
		border: 1px solid #d1d1d1;color: #4297ff;font-size: 1.5rem;padding: 0.5rem 0;margin-left: 1rem;width: 10rem;
	}
	.yzmhide{
		border: 1px solid #d1d1d1;color: rgb(176, 66, 255);font-size: 1.5rem;padding: 0.5rem 0;margin-left: 1rem;width: 10rem;
	}
</style>
<style>
	.el-button:focus, .el-button:hover{
		background: #e7e9ee !important;
	}
</style>